<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    destroy-on-close
    :close-on-click-modal="false"
    @closed="$emit('closed')"
    width="600px"
    custom-class="menu-dialog-height"
  >
    <el-form ref="dialogForm" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="所属部门">
        <el-cascader
          v-model="form.dept_id"
          ref="cascader"
          :options="deptData"
          @change="handleChange"
          style="width: 100%"
          :props="{ label: 'name', value: 'id', checkStrictly: 'true' }"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="request"
          :show-file-list="false"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="所属角色" prop="role_id">
        <el-cascader
          v-model="form.role_id"
          :options="groups"
          :props="defaultProps"
          :show-all-levels="false"
          clearable
          style="width: 100%"
          placeholder="请选择"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="直属上级" prop="leader_id">
        <el-cascader
          v-model="form.leader_id"
          :options="leader"
          :props="defaultProps"
          :show-all-levels="false"
          clearable
          style="width: 100%"
          placeholder="请选择"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="登录账号" prop="name">
        <el-input
          v-model="form.name"
          placeholder="用于登录系统,纯字母"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="员工名" prop="nickname">
        <el-input
          v-model="form.nickname"
          placeholder="请输入昵称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          clearable
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio v-model="form.status" label="1">启用</el-radio>
        <el-radio v-model="form.status" label="2">禁用</el-radio>
      </el-form-item>
      <el-form-item label="是否主管" prop="is_leader">
        <el-radio v-model="form.is_leader" label="1">是</el-radio>
        <el-radio v-model="form.is_leader" label="2">否</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button
          type="primary"
          :loading="isSaveing"
          @click="submit()"
          size="small"
          >确 定</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      mode: "add",
      title: "添加用户",
      form: {
        id: "",
        name: "",
        avatar: "",
        nickname: "",
        role_id: "",
        dept_id: "",
        password: "",
        status: "1",
        is_leader: "2",
        leader_id: "",
      },
      deptData: [],
      rules: {
        avatar: [{ required: true, message: "请上传头像" }],
        name: [{ required: true, message: "请输入登录账号" }],
        nickname: [{ required: true, message: "请输入昵称" }],
        role_id: [{ required: true, message: "请选择所属角色" }],
        status: [{ required: true, message: "请选择状态" }],
      },
      visible: false,
      isSaveing: false,
      leader: [],
      groups: [],
      defaultProps: {
        value: "id",
        emitPath: false,
      },
    };
  },
  watch: {
    "form.dept_id"() {
      if (this.$refs.cascader) {
        this.$refs.cascader.dropDownVisible = false; //监听值发生变化就关闭它
      }
    },
  },
  mounted() {
    this.getRoleList();
    this.getUserList();
    this.getDeptTree();
  },
  methods: {
    open(mode) {
      this.visible = true;
      this.mode = mode;
      if (this.mode == "add") {
        this.title = "添加用户";
        this.rules.password = [{ required: true, message: "请输入密码" }];
      } else {
        this.title = "编辑用户";
      }
      return this;
    },
    setData(data) {
      this.form.id = data.id;
      this.form.name = data.name;
      this.form.avatar = data.avatar;
      this.form.nickname = data.nickname;
      this.form.role_id = data.role_id;
      this.form.status = String(data.status);
      this.form.is_leader = String(data.is_leader);
      this.form.leader_id = data.leader_id;
      this.form.dept_id = data.dept_id;
    },
    cascaderClick(nodeData) {
      this.$refs.cascader.checkedValue = nodeData.name;
      this.$refs.cascader.computePresentText();
      this.$refs.cascader.toggleDropDownVisible(false);

      this.form.dept_id = nodeData.id;
    },
    async getRoleList() {
      var res = await this.$api.role.list.get({ pageSize: 10000 });
      if (res.data.rows.length > 0) {
        let map = [];
        res.data.rows.forEach((element) => {
          if (element.id > 1) {
            map.push({
              label: element.name,
              id: element.id,
            });
          }
        });

        this.groups = map;
      }
    },
    async getUserList() {
      var res = await this.$api.user.userList.get({ pageSize: 10000 });
      if (res.data.rows.length > 0) {
        let map = [];
        res.data.rows.forEach((element) => {
          if (element.id > 1) {
            map.push({
              label: element.name,
              id: element.id,
            });
          }
        });

        this.leader = map;
      }
    },
    async getDeptTree() {
      let res = await this.$api.dept.list.get();
      if (res.code == 0) {
        let allNode = { id: 0, name: "所有" };
        res.data.unshift(allNode);
        this.deptData = res.data;
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
    // 表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          let res;
          if (this.mode == "add") {
            res = await this.$api.user.add.post(this.form);
          } else {
            res = await this.$api.user.edit.post(this.form);
          }
          this.isSaveing = false;
          if (res.code == 0) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } else {
            this.$alert(res.msg, "提示", { type: "error" });
          }
        }
      });
    },
    async request(param) {
      const data = new FormData();
      var file = param.file;
      data.append("file", file);
      let res = await this.$api.upload.doupload.post(data);
      if (res.code == 0) {
        this.form.avatar = res.data.src;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 选择了部门
    handleChange(val) {
      this.form.dept_id = val[val.length - 1];
    },
  },
};
</script>

<style>
.menu-dialog-height {
  height: 80%;
  overflow: scroll;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
